<template>
  <header :class="[{ 'be_black': isblack }, 'mheader']">
    <span class="mheader__left">
      <div class="icon__content" v-if="showback">
        <i class="iconfont icon-arrow-right" @click="backSuperior"></i>
        <span class="line">|</span>
        <i class="iconfont icon-jia" @click="backHome"></i>
      </div>
    </span>
    <span :class="['mheader__main', { 'be_black': isblack }]">{{ title }}</span>
    <span class="mheader__right">
      <div class="icon__content">
        <i class="iconfont icon-sangedian-copy"></i>
        <span class="line">|</span>
        <i class="iconfont icon-zu8920"></i>
      </div>
    </span>
  </header>
</template>
<script setup>
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'
defineProps({
  isblack: Boolean,
  showback: Boolean,
  title: String
})

const router = useRouter()
const backSuperior = () => {
  router.go(-1)
}
const backHome = () => {
  router.push('/')
}
</script>
<style lang="stylus" scoped>
.mheader
  display flex
  justify-content space-between
  align-items center
  font-weight 500
  height 34px
  line-height 34px
  padding 0 14px
  color white
  .mheader__main  
    flex 1
    text-align center
    max-width 150px
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
  margin-top 3px
  .mheader__left,
  .mheader__right
    width 70px
    .icon__content
      display flex
      width 100%
      height 25px
      align-items center
      justify-content space-evenly
      border-radius 20px
      border 1px solid rgba(0,0,0,0.05)
      background  rgba(0,0,0,0.05)
      .line
        color rgba(0,0,0,0.05)
.be_black 
  color black
</style>